<template>
	<view>
		<view class="uni-header">
			<label style="font-size:18px;">
				与 张亮麻辣烫(人民广场店) 对话
			</label>
			<!--内容列表开始-->
			<view class="chat-content-box left clearfix">

				<view>
					<view class="chat-content-li-time left clearfix">
						刚刚
					</view>
					<view class="chat-content-li-box left clearfix">
						<view class="chat-content-li-left left">
							<label>
								<image
									src="https://mp-60d04191-dfc8-47dc-b1e1-36d6fc279352.cdn.bspapp.com/headimage/5.jpg?x-oss-process=image/resize,w_150,m_lfit"
									mode="aspectFill"></image>
							</label>
						</view>
						<view class="chat-content-li-center left clearfix">
							亲爱的顾客，祝您用餐愉快，如果有问题请随时联系我们，好吃麻烦给个好评，期待您下次再来我店用餐。
						</view>
					</view>
				</view>

				<view>
					<view class="chat-content-li-time left clearfix">
						21:43
					</view>
					<view class="chat-content-li-box right clearfix" style="margin-right:1rem;">
						<view class="chat-content-li-right right">
							<label>
								<image
									src="https://mp-60d04191-dfc8-47dc-b1e1-36d6fc279352.cdn.bspapp.com/headimage/5.jpg?x-oss-process=image/resize,w_150,m_lfit"
									mode="aspectFill"></image>
							</label>
						</view>
						<view class="chat-content-li-right-center right clearfix">
							亲爱的顾客，祝您用餐愉快，如果有问题请随时联系我们，好吃麻烦给个好评，期待您下次再来我店用餐。
						</view>
					</view>
				</view>


			</view>
			<!--内容列表结束-->
			<!--输入框和发送按钮开始-->
			<view class="chat-input-boxs left clearfix">
				<view class="chat-input-top left clearfix clearfix">
					<textarea class="chat-uni-input" placeholder="请在这里输入聊天内容····" style="height:80px;padding:10px;" />
				</view>
				<view class="chat-input-buttons left clearfix">
					<label class="chat-input-submit-button" style="height:35px;margin-top:5px;line-height:35px;color:#fff;">
						发送(Enter)
					</label>
					<label>
						<span>
							<uni-icons type="icon-xiaolian" custom-prefix="iconfont" color="#777" size="25"></uni-icons>
						</span>
						<span>
							表情包
						</span>

					</label>
					<label>
						<span>
							<uni-icons type="icon-xiaoxi" custom-prefix="iconfont" color="#777" size="25"></uni-icons>
						</span>
						<span>
							快捷回复
						</span>

					</label>
				</view>
			</view>
			<!--输入框和发送按钮结束-->
		</view>



	</view>
</template>
<style>

</style>
<style scoped>
	.uni-header {
		padding: 20px;
	}

	.chat-input-submit-button {
		background: #3c9cff;
		color: #fff;
		width: 100px;
		text-align: center;
		border-radius: 5px;
	}

	.chat-input-buttons label span {
		float: left;
		line-height: 50px;
		height: 50px;
		margin-right: 2px;
	}

	.chat-input-buttons label {
		float: right;
		height: 50px;
		line-height: 50px;
		margin-right: 50px;
		color: #666;
	}

	.chat-input-buttons {
		width: 100%;
		height: 50px;
		width: 98%;
		margin-left: 1%;
		margin-top: 20px;
	}

	.chat-uni-input {
		width: 98.5%;
		height: 80px;
	}

	.chat-input-top {
		width: 98%;
		margin-left: 1%;
		height: 80px;
		background: #fff;
		margin-top: 10px;
		border-radius: 5px;
	}

	.chat-input-boxs {
		width: 98%;
		height: 170px;
		margin-left: 1%;
		background: #f4f4f4;
		margin-top: 10px;
		border-radius: 5px;
	}

	.chat-content-li-right-center {
		max-width: calc(100% - 5rem);
		margin-right: .5rem;
		background: #8cde9b;
		padding: .5rem;
		border-radius: 5px;
		color: #333;
	}

	.chat-content-li-right label image {
		width: 100%;
		height: 100%;
	}

	.chat-content-li-right label {
		width: 3rem;
		height: 3rem;
		float: left;
		overflow: hidden;
		margin-right: 1rem;
	}

	.chat-content-li-center {
		max-width: calc(100% - 5rem);
		margin-left: .5rem;
		background: #fff;
		padding: .5rem;
		border-radius: 5px;
		color: #333;
	}

	.chat-content-li-left label image {
		width: 100%;
		height: 100%;
	}

	.chat-content-li-left label {
		width: 3rem;
		height: 3rem;
		float: left;
		overflow: hidden;
	}

	.chat-content-li-left {
		width: 3rem;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}

	.chat-content-li-right {
		width: 3rem;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}

	.chat-content-li-box {
		width: 80%;
		min-height: 4rem;
		margin-left: 1rem;
		margin-bottom: 1rem;
	}

	.chat-right-icon {
		width: 2rem;
		height: 3rem;
		line-height: 3rem;
		text-align: center;
		margin-right: .5rem;
	}

	.chat-uni-input {
		height: 2.2rem;
		line-height: 2.2rem;
		padding-left: .5rem;
		padding-right: .5rem;
		font-size: 1rem;
	}

	.chat-input {
		width: 64%;
		height: 2.2rem;
		background: #fff;
		margin-top: .4rem;
		border-radius: 5px;
	}

	.chat-yuyin {
		width: 2rem;
		text-align: center;
		line-height: 3rem;
		height: 3rem;
		margin-left: .5rem;
		margin-right: .5rem;
	}

	.chat-input-box {
		width: 100%;
		line-height: 3rem;
		height: 3rem;
		background: #f8f8f8;
		bottom: 0px;
		left: 0px;
		right: 0px;
		border-top: 1px solid #e8e8e8;
	}

	.chat-content-li-time {
		width: 100%;
		line-height: 2.5rem;
		text-align: center;
		color: #999;
		font-size: .9rem;
		
	}

	.chat-content-box {
		width: 98%;
		margin-left: 1%;
		min-height:250px;
		background: #f4f4f4;
		margin-top: 10px;
		border-radius: 5px;
		padding-top: 1rem;
	}
</style>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>